<script setup lang="ts">
import SwitchItem from '@/setting/components/widget/switch-item.vue';
import SidebarNav from '@/setting/components/widget/sidebar-nav.vue';
import headerNav from '@/setting/components/widget/header-nav.vue';
import { useAppearanceSettingStore } from '@/store/modules/appearance-setting';
import { useLayoutSettingStore } from '@/store/modules/layout-setting';

defineOptions({
  name: 'SettingLayout',
});

// 布局方式
const LAYOUT_ITEMS: Array<{ icon: Component; value: 'vertical' | 'horizontal'; name: string }> = [
  {
    icon: SidebarNav,
    value: 'vertical',
    name: '垂直布局',
  },
  {
    icon: headerNav,
    value: 'horizontal',
    name: '水平布局',
  },
];
const layoutValue = computed(() => useLayoutSettingStore().layout);
function activeTheme(theme: string): string[] {
  return theme === layoutValue.value ? ['outline-box-active'] : [];
}

const collapsed = computed(() => useLayoutSettingStore().collapsed);
function toggleCollapsed() {
  useLayoutSettingStore().setCollapsed(!collapsed.value);
}
const showBreadcrumbs = computed(() => useLayoutSettingStore().showBreadcrumbs);
function toggleShowBreadcrumbs() {
  useLayoutSettingStore().setShowBreadcrumbs(!showBreadcrumbs.value);
}
const showTabsView = computed(() => useLayoutSettingStore().showTabsView);
function toggleShowTabs() {
  useLayoutSettingStore().setShowTabsView(!showTabsView.value);
}
const persistentTabsView = computed(() => useLayoutSettingStore().persistentTabsView);
function togglePersistentTabs() {
  useLayoutSettingStore().setPersistentTabsView(!persistentTabsView.value);
}
const dragTabsView = computed(() => useLayoutSettingStore().dragTabsView);
function toggleDragTabsView() {
  useLayoutSettingStore().setDragTabsView(!dragTabsView.value);
}
const showTabsViewIcon = computed(() => useLayoutSettingStore().showTabsViewIcon);
function toggleTabsViewIcon() {
  useLayoutSettingStore().setShowTabsViewIcon(!dragTabsView.value);
}
const enableSearch = computed(() => useLayoutSettingStore().enableSearch);
function toggleEnableSearch() {
  useLayoutSettingStore().setEnableSearch(!enableSearch.value);
}
const enableTheme = computed(() => useLayoutSettingStore().enableTheme);
function toggleEnableTheme() {
  useLayoutSettingStore().setEnableTheme(!enableTheme.value);
}
const enableLang = computed(() => useLayoutSettingStore().enableLang);
function toggleEnableLang() {
  useLayoutSettingStore().setEnableLang(!enableLang.value);
}
const enableFullscreen = computed(() => useLayoutSettingStore().enableFullscreen);
function toggleFullscreen() {
  useLayoutSettingStore().setEnableFullscreen(!enableFullscreen.value);
}
const enableLock = computed(() => useLayoutSettingStore().enableLock);
function toggleLock() {
  useLayoutSettingStore().setEnableLock(!enableLock.value);
}
const enableReload = computed(() => useLayoutSettingStore().enableReload);
function toggleReload() {
  useLayoutSettingStore().setEnableReload(!enableReload.value);
}
const enableCollapsed = computed(() => useLayoutSettingStore().enableCollapsed);
function toggleEnableCollapsed() {
  useLayoutSettingStore().setEnableCollapsed(!enableCollapsed.value);
}

const appThemeValue = computed(() => {
  return useAppearanceSettingStore().getAppTheme;
});
</script>

<template>
  <div>
    <h4>布局</h4>
    <div class="flex flex-wrap w-full flex-wrap justify-around">
      <template v-for="item of LAYOUT_ITEMS" :key="item.value">
        <div
          class="flex w-[100px] cursor-pointer flex-col py-2"
          @click="useLayoutSettingStore().setLayout(item.value)"
        >
          <div
            :class="activeTheme(item.value)"
            class="outline-box flex items-center justify-center"
          >
            <component :is="item.icon" />
          </div>
          <div class="text-muted-foreground mt-2 text-center text-xs">
            {{ item.name }}
          </div>
        </div>
      </template>
    </div>

    <h4>侧边栏</h4>
    <SwitchItem :checked="collapsed" name="侧边栏收缩" @update:checked="toggleCollapsed" />

    <h4>面包屑导航</h4>
    <SwitchItem :checked="showBreadcrumbs" name="显示面包屑导航" @update:checked="toggleShowBreadcrumbs" />

    <h4>标签栏</h4>
    <SwitchItem :checked="showTabsView" name="启用标签栏" @update:checked="toggleShowTabs" />
    <SwitchItem :checked="persistentTabsView" name="持久化标签栏" @update:checked="togglePersistentTabs" />
    <SwitchItem :checked="dragTabsView" name="启用拖拽排序" @update:checked="toggleDragTabsView" />
    <SwitchItem :checked="showTabsViewIcon" name="显示标签栏图标" @update:checked="toggleTabsViewIcon" />

    <h4>小部件</h4>
    <SwitchItem :checked="enableSearch" name="启用全局搜索" @update:checked="toggleEnableSearch" />
    <SwitchItem :checked="enableTheme" name="启用主题切换" @update:checked="toggleEnableTheme" />
    <SwitchItem :checked="enableLang" name="启用语言切换" @update:checked="toggleEnableLang" />
    <SwitchItem :checked="enableFullscreen" name="启用全屏" @update:checked="toggleFullscreen" />
    <SwitchItem :checked="enableLock" name="启用锁屏" @update:checked="toggleLock" />
    <SwitchItem :checked="enableReload" name="启用刷新" @update:checked="toggleReload" />
    <SwitchItem :checked="enableCollapsed" name="启用侧边栏切换" @update:checked="toggleEnableCollapsed" />
  </div>
</template>

<style lang="less" scoped>
.outline-box.outline-box-active {
  outline-color: v-bind(appThemeValue);
  outline-width: 2px;
}
.outline-box:not(.outline-box-active):hover::after {
  outline-color: v-bind(appThemeValue);
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  border-radius: 0.375rem;
  opacity: 1;
}
</style>
